<template>

  <div class="center">
    <van-nav-bar
      title="我的书城"
      right-text="···"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <transition name="van-fade">
    <!-- 未登录 -->
    <div v-show="visible">
    <div class="bg" v-if="showid == 0">
      <p>
        <span @click="user(0)">登录</span>
        /
        <span @click="user(1)">注册</span>
      </p>
    </div>

    <!-- 已登录 -->
    <div class="newbg" v-if="showid == 1">
      <div class="left">
        <el-image
          :src="`${$Imgurl}/api/public/showImg/${cirecleImg}`"
          @click="userEdit()"
        ></el-image>
      </div>
      <div class="right">
        <p>{{ uname }}</p>
        <span>个性签名：读万卷书行万里路</span>
      </div>
    </div>

    <div class="history">
      <div class="card" @click="onClickRight()">
        <h3>0</h3>
        <h4>收藏的商品</h4>
      </div>
      <div class="card" @click="onClickRight()">
        <h3>0</h3>
        <h4>关注的店铺</h4>
      </div>
      <div class="card" @click="onClickRight()">
        <h3>0</h3>
        <h4>我的足迹</h4>
      </div>
    </div>

    <div class="content">
      <div class="order" @click="goOrder()">
        <div>
          <van-icon name="todo-list-o" size="30" color="#fb8f63" />
        </div>
        <div>我的订单</div>
        <div>查看全部购买商品<van-icon name="arrow"></van-icon></div>
      </div>

      <div class="orderstatu">
        <div>
          <van-icon name="peer-pay" size="25" color="gray" />
          <h5>待付款</h5>
        </div>
        <div>
          <van-icon name="logistics" size="25" color="gray" />
          <h5>待收货</h5>
        </div>
        <div>
          <van-icon name="notes-o" size="25" color="gray" />
          <h5>退换货</h5>
        </div>
      </div>

      <div class="userset" @click="userEdit()">
        <div><van-icon name="edit" size="25" color="gray" /></div>
        <div>修改我的信息</div>
        <div><van-icon name="arrow" size="25" color="gray" /></div>
      </div>

      <div class="exit" v-if="showid == 1">
        <van-button type="danger" size="large" class="btn" @click="exit()"
          >退出登录</van-button
        >
      </div>

      <div class="like">
        <p>
          ————<van-icon
            name="passed"
            size="25"
            color="red"
          />根据你的喜好猜你喜欢————
        </p>
      </div>
    </div>
    <NewBook></NewBook>
    </div>
    </transition>
    <Bottom></Bottom>
  </div>


</template>

<script>
import NewBook from "../book/NewBook.vue";
import Bottom from "../default/Bottom.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Center",
  components: {
    Bottom,
    NewBook,
  },
  data() {
    return {
      visible:false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
	//用户修改信息
	userEdit(){
		this.$router.push('/useredit');
	},


	//前往订单页
	goOrder(){
		this.$router.push('/order');
	},

    onClickRight() {
		this.$toast({
			duration:1000,
			message:"暂无功能",
		});
	},
    ...mapMutations("user", ["show", "userInfo"]),
    // 退出登录
    exit() {
      localStorage.clear();
      this.show(0);
      let userInfo = {
        uname: "",
        uimg: "",
      };
      this.userInfo(userInfo);
      this.$toast("退出成功");
    },

    user(id) {
      id == 0 ? this.$router.push("/login") : this.$router.push("/registered");
    },
  },

  computed: {
    ...mapState("user", ["showid", "uname", "cirecleImg"]),
  },
  mounted() {},
  created() {
        setTimeout(() => {
      this.visible = true;
    }, 300);
  },
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
  font-style: initial;
}

:deep(.van-nav-bar__content > .van-nav-bar__left > .van-nav-bar__text) {
  color: gray !important;
  font-weight: normal;
  font-size: initial;
}

:deep(.van-icon-arrow-left) {
  color: gray !important;
}

:deep(.van-nav-bar__title) {
  color: gray !important;
}

:deep(.van-nav-bar__text) {
  color: gray !important;
  font-size: 0.5rem;
  font-weight: bold;
}

.bg,
.newbg {
  width: 100%;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-size: 100% 100%;
  background-image: url("http://img61.ddimg.cn/upload_img/00610/home/user-bg.jpg");
}

.bg p {
  border: 1px solid white;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  text-align: center;
  font-size: 0.4rem;
}

.bg p span:first-child {
  padding-left: 0.3rem;
}

.bg p span:last-child {
  padding-right: 0.3rem;
}

.newbg .left {
  width: 30%;
  height: 50%;
  margin: 25% 0;
}

.newbg .left .el-image {
  width: 60%;
  height: 100%;
  margin: 0 20%;
  border-radius: 100%;
}

.newbg .right {
  width: 60%;
  height: 100%;
  height: 50%;
  margin: 25% 0;
}

.newbg .right p {
  font-weight: bold;
  color: white;
  font-size: 0.4rem;
  margin: 0.1rem 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.newbg .right span {
  margin: 0.1rem 0.1rem;
}

.history {
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 0.5rem;
  margin-top: 0.3rem;
}

.content {
  background-color: rgb(244, 245, 245);
}

.order {
  display: flex;
  height: 1.5rem;
  line-height: 1.5rem;
  width: 100%;
  border-radius: 0.1rem;
  background-color: white;
}

.order div:first-child {
  width: 15%;
  height: 1.5rem;
  text-align: center;
}

.order div:nth-child(2) {
  width: 53%;
  height: 1rem;
  font-size: 0.35rem;
}

.order div:first-child i {
  line-height: 1.5rem;
}

.orderstatu {
  width: 96% !important;
  margin: 0.3rem 2%;
  display: flex;
  height: 1.3rem;
  justify-content: space-around;
  color: gray;
  border-radius: 0.1rem;
  text-align: center;
  background-color: white;
  border-bottom: 1px solid ghostwhite;
}

.orderstatu h5 {
  margin-top: 0.1rem;
}

.btn {
  width: 96% !important;
  margin: 0.3rem 2%;
  height: 1rem;
}

.userset {
  display: flex;
  width: 96% !important;
  height: 1rem;
  line-height: 1rem;
  margin: 0.3rem 2%;

  background-color: white;
  border-radius: 0.1rem;
}

.userset div:first-child {
  width: 10%;
}

.userset div:nth-child(2) {
  width: 80%;
  font-size: 0.4rem;
  color: gray;
}

.userset i {
  line-height: 1rem;
}

.like {
  height: 1.5rem;
  width: 100%;
  line-height: 1.5rem;
  text-align: center;
}

.like p i {
  line-height: 1.5rem;
  position: relative;
  top: 0.1rem;
}
</style>
